var Book = Class.create({

	initialize: function (aWidth,aHeight,picArray,SimplePageTexture,aPageR,BorderLine)
	{
		this.myBook = document.getElementById("myBook");
		this.pWidth =  aWidth;
		this.pHeight =  aHeight;
		this.extArray  = picArray;
		this.PageTexture = SimplePageTexture;
		this.ShadowPicR = aPageR;
		this.iBorderLine = BorderLine;
		this.PageshadowL; 
		this.PageshadowR ; 
		this.BorderDiv;

		this.isDrag = false;
		this.LeftBorder = 0;
		this.oElem;
		this.numPixels = 20; //number of pixels to slide per move

		this.leftStart=0;
		this.rightStart=1;
		this.currentPage = 0;
		this.IsAutoFlip =false;
		this.AutoflipPage= 0;

		this.pageBorderWidth = 1;
		this.pageBorderColor="#000000"; //border color
		this.pageBorderStyle="solid"; //border style eg. solid, dashed or dotted.

		this.pSpeed=20; //page speed, 20 is best for Opera browser. Less is faster

		this.showBinder=true; //change to false for no binder

		this.binderImage = "Pic/parchmentring3.gif"; //location of center binder
		this.BinderWidth = 20; //width of center binder image

		this.baseBg = "Pic/Vintage_Paper.jpg";

		var tempPixelsToMove,tempSpeed;
		var hideDiv,revealDiv,revealHtmlDiv,hideHtmlDiv;
		var myBinder;
		var isMoving=false;
		
		// Add for contain Genesis Object
		this.bookGenesisContainer = new Array(); 
	},
	
	Create:function()
	{

		if(!document.getElementById("myBook") ){return;}; 
		
		pWidth=myPageW+2; 
		pHeight=myPageH+2; 
		
		this.myBook.style.width=(pWidth*2)+'px';
		this.myBook.style.height=pHeight+'px';
		this.myBook.style.position="relative";
		this.myBook.style.zIndex="0";      

		for(var i = 0; i< /*extArray.length*/ 4;i++)
		{
			var deg2radians = Math.PI * 2 / 360;
			var	deg = 30;
			var rad = deg * deg2radians ;
			costheta = Math.cos(rad);
			sintheta = Math.sin(rad);
			sinminus = -sintheta;
			
			// Tag Book Page
			this.bookGenesisContainer[i] = new Array(); // Keep all Genesis for specific page 1
			this.bookGenesisContainer[i][0] = new Genesis(0,0);
			this.bookGenesisContainer[i][0].setSize(myPageW,myPageH);
			this.bookGenesisContainer[i][0].getDomObj().id                = "flipHtml"+i;
			this.bookGenesisContainer[i][0].getDomObj().position		  =  "absolute";
			this.bookGenesisContainer[i][0].getDomObj().style.top         = "0px";
			this.bookGenesisContainer[i][0].getDomObj().style.left 		  = "0px";
			this.bookGenesisContainer[i][0].getDomObj().style.overflow    = "hidden";	
			this.bookGenesisContainer[i][0].getDomObj().style.borderWidth = "1px";
			this.bookGenesisContainer[i][0].getDomObj().style.borderColor = this.pageBorderColor;
			this.bookGenesisContainer[i][0].getDomObj().style.borderStyle = this.pageBorderStyle;
			this.bookGenesisContainer[i][0].getDomObj().style.background  = "#785165 url('"+extArray[i]+"') ";
		
		/*
		var ImgDiv = document.createElement('div');
			ImgDiv.setAttribute("id","flipHtml"+i);	
			ImgDiv.style.position="absolute";
			ImgDiv.style.width=myPageW+"px";
			ImgDiv.style.height=myPageH+"px";
			ImgDiv.style.top="0px";
			ImgDiv.style.left="0px";		
			ImgDiv.style.overflow="hidden";			
			ImgDiv.style.borderWidth="1px";
			ImgDiv.style.borderColor=this.pageBorderColor;
			ImgDiv.style.borderStyle=this.pageBorderStyle;
			ImgDiv.style.background="#785165 url('"+this.extArray[i]+"') ";
			//ImgDiv.style.background="#785165 url('Pic/Pictest.png') ";
		*/
		
		var myDiv = document.createElement('div'); 
			myDiv.setAttribute("id","flipPage"+i);
			myDiv.style.position="absolute";
			myDiv.style.left=pWidth+this.LeftBorder+'px';
			myDiv.style.top=0+'px';
			myDiv.style.width=pWidth+"px";
			myDiv.style.height=pHeight+"px";			
			myDiv.style.overflow="hidden";
			myDiv.style.zIndex=extArray.length-i;
		
				if(i%2 == 0)
				{
					this.bookGenesisContainer[i][0].getDomObj().onmousedown = function(e){Book.dragBegin(e,true);};
				}
				else
				{
					this.bookGenesisContainer[i][0].getDomObj().onmousedown = function(e){Book.dragBegin(e,false);};
				}
		myDiv.appendChild(this.bookGenesisContainer[i][0].getDomObj());
		this.myBook.appendChild(myDiv);
	}
	var LeftDiv = document.createElement('div');
		LeftDiv.setAttribute("id","LeftBg");	
		LeftDiv.style.position="absolute";
		LeftDiv.style.width=0+"px";
		LeftDiv.style.height=myPageH+"px";
		LeftDiv.style.top="0px";
		LeftDiv.style.left="0px";		
		LeftDiv.style.overflow="hidden";			
		LeftDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		LeftDiv.style.zIndex=1;
		this.myBook.appendChild(LeftDiv);
		
	var RightDiv = document.createElement('div');
		RightDiv.setAttribute("id","RightBg");	
		RightDiv.style.position="absolute";
		RightDiv.style.width=0+"px";
		RightDiv.style.height=myPageH+"px";
		RightDiv.style.top="0px";
		RightDiv.style.left=this.pWidth+"px";		
		RightDiv.style.overflow="hidden";			
		RightDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		RightDiv.style.zIndex=1;
		this.myBook.appendChild(RightDiv);
		
	for(var i = 0; i <= extArray.length;i++)
	{	
		if(i%2 ==0)
		{
		var Index = document.getElementById("myIndex");
		
		var newIndex = document.createElement('A'); 
		//newIndex.setAttribute("onClick","autoFlip('"+i+"');"); 
		newIndex.setAttribute("href","javascript:Book.autoFlip('"+i+"');"); 
		newIndex.innerHTML = "test"+i;
		
		Index.appendChild(newIndex);
		}
	}
		
	if(this.showBinder)
	{
		myBinder = document.createElement('div'); 	
		myBinder.style.width=this.BinderWidth+"px";
		myBinder.style.height=pHeight+'px';
		myBinder.style.position="absolute";
		myBinder.style.top="0px";
		myBinder.style.left=pWidth-(this.BinderWidth/2)+"px";
		myBinder.style.background="transparent url('"+this.binderImage+"') top left repeat-y";
		myBinder.style.zIndex="50";
		this.myBook.appendChild(myBinder);		
	}
			


		PageshadowL = document.createElement('div'); 	
		PageshadowL.style.width=this.BinderWidth+"px";
		PageshadowL.style.height=pHeight+'px';
		PageshadowL.style.position="absolute";
		PageshadowL.style.width=0+"px";
		PageshadowL.style.height=myPageH+"px";
		PageshadowL.style.top="0px";
		PageshadowL.style.left=0+'px';
		PageshadowL.style.background="transparent url('"+this.ShadowPicR+"') top left repeat-y";
		PageshadowL.style.zIndex="50";
		//Pageshadow.style.FILTER = " alpha(opacity=50)";
		//PageshadowL.style.opacity = "0.5";
		this.myBook.appendChild(PageshadowL);
		
		PageshadowR = document.createElement('div'); 	
		PageshadowR.style.width=this.BinderWidth+"px";
		PageshadowR.style.height=pHeight+'px';
		PageshadowR.style.position="absolute";
		PageshadowR.style.width=0+"px";
		PageshadowR.style.height=myPageH+"px";
		PageshadowR.style.top="0px";
		PageshadowR.style.left=pWidth+'px';
		PageshadowR.style.background="transparent url('"+this.ShadowPicR+"') top left repeat-y";
		PageshadowR.style.zIndex="50";
		//Pageshadow.style.FILTER = " alpha(opacity=50)";
		PageshadowR.style.opacity = "0.5";
		this.myBook.appendChild(PageshadowR);	
		
		BorderDiv = document.createElement('div');
		BorderDiv.setAttribute("id","BorderLine");	
		BorderDiv.style.position="absolute";
		BorderDiv.style.width=0+"px";
		BorderDiv.style.height=myPageH+"px";
		BorderDiv.style.top="0px";
		BorderDiv.style.left=0+"px";		
		BorderDiv.style.overflow="hidden";			
		BorderDiv.style.background="#785165 url('"+this.iBorderLine+"') ";
		BorderDiv.style.zIndex=99;
		
		this.myBook.appendChild(BorderDiv);
		
	

},



autoFlip:function(topage)
{	
	if((!this.IsAutoFlip)&&(topage!=this.currentPage))
	{
		this.IsAutoFlip =true;
		this.AutoflipPage =topage;
		
		if((topage== extArray.length)&&(this.currentPage==0)) // FrontMost to BackMost
		{
			Book.doAutoFlip(2,true,2);
		
		}
		else if((topage==0)&&(this.currentPage==extArray.length))//  BackMost to FrontMost 
		{
			Book.doAutoFlip(2,false,extArray.length-2);
		
		}
		else
		{	
			
			if(Math.abs(topage)>Math.abs(this.currentPage)) //DragRight
			{	
				Book.gonext(topage);
			}
			else // DragLeft
			{
				Book.goprev(topage);
			}
		 }
	 }
},

doAutoFlip:function (num,dir,topage)
{
	if(num==0){	window.clearTimeout();return;};
	this.IsAutoFlip =true;
	this.AutoflipPage =topage;
	if(dir)
	{	
		
		Book.gonext(topage);
	}
	else
	{	
		
		Book.goprev(topage);
	}
		num--;
		var valuenext;
		if(topage ==2)
		{
			valuenext = extArray.length;
		}
		else
		{
			valuenext = 0;
		}
	 window.setTimeout('Book.doAutoFlip('+num+','+dir+','+valuenext+')',500);
},

gonext:function(topage)
{
	if($(this).isMoving)
	{
	alert('gonexterror1');
	return;
	};
	$(this).isMoving=true;
	
	// Set Page which visible while moving to be Blank page
		if(topage == extArray.length) //go to last page
		{	
			this.currentPage = extArray.length;
			this.leftStart=2;
			this.rightStart=3;		
			
			var PrevHtmlDiv = document.getElementById("flipHtml"+1);
			PrevHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		}
		else
		{	
			//var PrevHtmlDiv = document.getElementById("flipHtml"+1);
			//PrevHtmlDiv.style.background="#785165 url('Pic/Pictest.png') ";
			this.leftStart=0;
			this.rightStart=1;	
			var Value = $(this).rightStart+1
			if(this.currentPage!=0)
			{
			var LeftBgDiv   = document.getElementById("LeftBg") ;
			LeftBgDiv.style.width=myPageW+"px";
			}
			var NextHtmlDiv = document.getElementById("flipHtml"+Value);
			NextHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		}
		

	hideDiv   = document.getElementById("flipPage"+$(this).leftStart);
	hideHtmlDiv	= document.getElementById("flipHtml"+$(this).leftStart);
	hideHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
	
	revealDiv = document.getElementById("flipPage"+$(this).rightStart);
	revealHtmlDiv = document.getElementById("flipHtml"+$(this).rightStart);
	revealHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
	
		//---  New Page Organize Style--//
		revealHtmlDiv.style.left="0px";	
		hideHtmlDiv.style.left="0px";	
		////////////////////////////////////////////
	
	revealDiv.style.width="0px";
	revealDiv.style.left=pWidth*2+'px';
	revealDiv.style.zIndex=99;
	
	Book.goright(pWidth*2,0);
},

goright:function(currLeft,currWidth)
{
	if(currLeft <= this.numPixels*2)
	{
		window.clearTimeout();
		
		revealDiv.style.left=this.LeftBorder+'px';
		revealDiv.style.width=pWidth+'px';
		hideDiv.style.width = 0+'px';
		BorderDiv.style.width = "0px";
		revealDiv.style.zIndex= this.rightStart ;

		var LeftBgDiv   = document.getElementById("LeftBg") ;
		LeftBgDiv.style.width=0+"px";
		
		
	
		if(this.IsAutoFlip)
		{
			this.currentPage = this.AutoflipPage;
			this.AutoflipPage =0;
			this.IsAutoFlip =false;
		}
		else
		{
			this.currentPage = this.currentPage +2;
		}
		
		
		Book.SetPage(true);
		
		$(this).isDrag = false;		
		$(this).isMoving=false;
		
		
		return;
	}	

	currLeft=currLeft-($(this).numPixels*2);//2 * width reveal
	currWidth=currWidth+$(this).numPixels;
	
	revealDiv.style.left=currLeft+'px';
	revealDiv.style.width=currWidth+'px';
	hideWidth = currLeft-pWidth;	
	
	if(hideWidth>0)
	{
		hideDiv.style.width=hideWidth+'px';
	}
	else
	{
		hideDiv.style.width=0+'px';
		
	}
	
	if(parseInt(revealDiv.style.left)+parseInt(revealDiv.style.width)+3 >pWidth)
	{
		BorderDiv.style.left = parseInt(revealDiv.style.left)+parseInt(revealDiv.style.width)+3+"px";
		BorderDiv.style.opacity = 0.4;
		BorderDiv.style.width = "5px";
					
		PageshadowL.style.zIndex=parseInt(hideDiv.style.zIndex)+1; 
		PageshadowL.style.left = parseInt(BorderDiv.style.left)+"px";
		PageshadowL.style.width= pWidth -parseInt(hideDiv.style.width )-parseInt(revealDiv.style.width )+"px";
		PageshadowL.style.opacity =(pWidth - parseInt(PageshadowL.style.width)-this.LeftBorder)/1000  ;
	}
	else
	{
		PageshadowL.style.width= 0+"px";				
		BorderDiv.style.width = "0px";
	}

	 window.setTimeout('Book.goright('+currLeft+','+currWidth+')',$(this).pSpeed);
	

},
gorightReverse:function(currLeft,currWidth)
{
	if(currWidth <= this.numPixels)
	{
		window.clearTimeout();
		
		var LeftBgDiv   = document.getElementById("LeftBg") ;
		LeftBgDiv.style.width=0+"px";
		
		if(this.currentPage==0)
		{
		revealDiv.style.left=this.pWidth+'px';
		revealDiv.style.width=0+'px';
		

		hideDiv.style.width = this.pWidth+'px';
		
		}
		else if(this.currentPage == extArray.length-2)
		{
		revealDiv.style.left=this.pWidth+'px';
		revealDiv.style.width=0+'px';
		
		hideDiv.style.width = this.pWidth+'px';
		
		
		
		}
		else
		{
		revealDiv.style.left=this.LeftBorder+'px';
		revealDiv.style.width=pWidth+'px';
		

		hideDiv.style.width = 0+'px';
		
		revealDiv.style.zIndex= this.rightStart ;
		}
			
		Book.SetPage(true);
		
		$(this).isDrag = false;		
		$(this).isMoving=false;
		
		return;
	
	}
	currLeft=currLeft+($(this).numPixels*2);//2 * width reveal
	currWidth=currWidth-$(this).numPixels;
	
	revealDiv.style.left=currLeft+'px';
	revealDiv.style.width=currWidth+'px';
	
	
	hideWidth = currLeft-pWidth;	
	//PageshadowR.style.left=pWidth+'px';
	//PageshadowR.style.zIndex= parseInt(hideDiv.style.zIndex)-1;
	//PageshadowR.style.width=pWidth +"px";
	//PageshadowR.style.opacity =parseInt(revealDiv.style.left)/1500 ;
	
	if(hideWidth>0)
	{
		hideDiv.style.width=hideWidth+'px';
	}
	else
	{
		hideDiv.style.width=0+'px';
		
	}

	 window.setTimeout('Book.gorightReverse('+currLeft+','+currWidth+')',$(this).pSpeed);
	

},

goprev :function(topage){
	if($(this).isMoving)
	{
		alert('Error1');
	return;
	}
	
	isMoving=true;
	
		if(topage==0)
		{
		
			this.leftStart=0;
			this.rightStart=1;
		
			var NextHtmlDiv = document.getElementById("flipHtml"+2);
			NextHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		}
		else if(this.currentPage == extArray.length)
		{
			var PrevHtmlDiv = document.getElementById("flipHtml"+1);
			PrevHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		
		}
		else
		{	
			
			$(this).rightStart = 3;
			$(this).leftStart = 2;
			var PrevHtmlDiv = document.getElementById("flipHtml"+1);
			PrevHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
			var RightBgDiv   = document.getElementById("RightBg") ;
			RightBgDiv.style.width=myPageW+"px";
			//var NextHtmlDiv = document.getElementById("flipHtml"+4);
			//NextHtmlDiv.style.background="#785165 url('Pic/Pictest.png') ";
		}


	
	hideDiv = document.getElementById("flipPage"+$(this).rightStart);
	hideHtmlDiv	= document.getElementById("flipHtml"+$(this).rightStart);
	hideHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
	
	revealDiv = document.getElementById("flipPage"+$(this).leftStart);
	revealHtmlDiv = document.getElementById("flipHtml"+$(this).leftStart);	
	revealHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
	
		//---  New Page Organize Style--//
		hideHtmlDiv.style.left="";	
		hideHtmlDiv.style.right=0+'px';
		revealHtmlDiv.style.left="";	
		revealHtmlDiv.style.right=0 + 'px';
		////////////////////////////////////////////
		
		
	revealDiv.style.left="0px";	
	revealDiv.style.width="0px";
	revealDiv.style.zIndex=99;

	hideDiv.style.left="";
	hideDiv.style.right=pWidth+"px";
	
	Book.goleft(0,0);
},

goleft:function(currLeft,currWidth)
	{
	
	if(currLeft >=(pWidth-($(this).numPixels)))
	{
		window.clearTimeout();
		
		revealDiv.style.left=pWidth-this.LeftBorder+"px";
		revealDiv.style.width=pWidth+"px";
		
		hideDiv.style.width = 0+'px';

		revealDiv.style.zIndex=extArray.length-this.leftStart ;
		
		if(this.IsAutoFlip)
		{
			this.currentPage = this.AutoflipPage;
			this.AutoflipPage =0;
			this.IsAutoFlip =false;
		}
		else
		{
			
			if( this.currentPage ==extArray.length)
			{
				this.leftStart=this.leftStart-2;
				this.rightStart=this.rightStart-2;
				
			}
			this.currentPage = this.currentPage -2;
		}
		var RightBgDiv   = document.getElementById("RightBg") ;
		RightBgDiv.style.width=0+"px";
		
		Book.SetPage(false);
		$(this).isMoving=false;
		$(this).isDrag = false;
		
		
		return;
	}
	else
	{
		currLeft=currLeft+$(this).numPixels;//1 * width reveal
		currWidth=currWidth+$(this).numPixels;
		
		revealDiv.style.width=currWidth+'px';	
		revealDiv.style.left=currLeft+'px';
		
		
		hideWidth = pWidth-currWidth;	
		
		
		//PageshadowL.style.zIndex= parseInt(hideDiv.style.zIndex)+1; 
		//PageshadowL.style.left = "0px";
		//PageshadowL.style.width= pWidth +"px";
		//PageshadowL.style.opacity =hideWidth/1500  ;
		
		if(hideWidth -$(this).numPixels >0)
		{
			hideDiv.style.width=hideWidth-$(this).numPixels+'px';
		}
		else
		{
			
			hideDiv.style.width=0+'px';
		}	
		
		
		 window.setTimeout('Book.goleft('+currLeft+','+currWidth+')',$(this).pSpeed);
	}
},

goleftReverse:function(currLeft,currWidth)
{	
	if(currLeft<=$(this).numPixels)
	{
		window.clearTimeout();
		
		var RightBgDiv   = document.getElementById("RightBg") ;
		RightBgDiv.style.width=0+"px";
		
		if(this.currentPage-2==0)
		{
		revealDiv.style.left=this.LeftBorder+"px";
		revealDiv.style.width=0+"px";
		
		hideDiv.style.width = pWidth+'px';
		}
		else if(this.currentPage==extArray.length)
		{
		revealDiv.style.left=pWidth-this.LeftBorder+"px";
		revealDiv.style.width=0+"px";
		
		hideDiv.style.width = pWidth+'px';
		
		}
		else
		{
		revealDiv.style.left=pWidth-this.LeftBorder+"px";
		revealDiv.style.width=pWidth+"px";
		
		hideDiv.style.width = 0+'px';
		
		}
		revealDiv.style.zIndex=extArray.length-this.leftStart ;
		
		Book.SetPage(false);
		$(this).isMoving=false;
		$(this).isDrag = false;
		
		
		return;
	}
	else
	{
		currLeft=currLeft-$(this).numPixels;//1 * width reveal
		currWidth=currWidth-$(this).numPixels;
		
		revealDiv.style.width=currWidth+'px';	
		revealDiv.style.left=currLeft+'px';
		
		
		hideWidth = pWidth-currWidth;	
		
		
		if(hideWidth -$(this).numPixels >0)
		{
			hideDiv.style.width=hideWidth-$(this).numPixels+'px';
		}
		else
		{
			
			hideDiv.style.width=0+'px';
		}	
		
		
		 window.setTimeout('Book.goleftReverse('+currLeft+','+currWidth+')',$(this).pSpeed);
	}

},


toggleBinder:function (){
	this.showBinder = (this.showBinder != false ? false : true );
	if(this.showBinder){	myBinder.style.display="";}else{myBinder.style.display="none";}
},



/////////////////////////////////////// THIS IS FOR DRAGGING FUNCTION//////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////



dragBegin:function(e,dir)
{	
	if($(this).isMoving){return;}
	
	if(!$(this).isDrag)
	{
	isDrag = true;
	
		if(dir) // DragRight
	    {
		
		// Set Page which visible while moving to be Blank page
		if(this.currentPage == extArray.length-2)
		{
			this.leftStart=2;
			this.rightStart=3;		
			
			var LeftBgDiv   = document.getElementById("LeftBg") ;
			LeftBgDiv.style.width=myPageW+"px";
			
			//var PrevHtmlDiv = document.getElementById("flipHtml"+3);
			//PrevHtmlDiv.style.background="#785165 url('Pic/Pictest.png') ";
		}
		else if(this.currentPage ==0)
		{
			var Value = $(this).rightStart+1
			var NextHtmlDiv = document.getElementById("flipHtml"+Value);
			NextHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		}
		else
		{	
			$(this).leftStart = 0;
			$(this).rightStart = 1;
			var Value = $(this).rightStart+1
			
			var LeftBgDiv   = document.getElementById("LeftBg") ;
			LeftBgDiv.style.width=myPageW+"px";
			var NextHtmlDiv = document.getElementById("flipHtml"+Value);
			NextHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		}
		
		
		$(this).oElem   = document.getElementById("flipPage"+$(this).leftStart);

		hideDiv   = document.getElementById("flipPage"+$(this).leftStart);
		hideHtmlDiv   = document.getElementById("flipHtml"+$(this).leftStart);
		hideHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		revealDiv = document.getElementById("flipPage"+$(this).rightStart);
		revealHtmlDiv = document.getElementById("flipHtml"+$(this).rightStart);
		revealHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		
		
		
	
		//---  New Page Organize Style--//
		revealHtmlDiv.style.left="0px";	
		hideHtmlDiv.style.left="0px";	
		////////////////////////////////////////////

		revealDiv.style.width="0px";
		revealDiv.style.left=pWidth*2+'px';
		revealDiv.style.zIndex=99;

			
		e = e ? e : window.event;
		$(this).oElem.mouseX = e.clientX;
		$(this).oElem.mouseY = e.clientY;
		
		document.onmousemove = function(e){Book.dragRight(e);};
		document.onmouseup = function(e){Book.dragRightEnd(e);};
		//document.onmouseup = function(e){dragEnd(e);};
		}
		else // DragLeft
		{

		if(this.currentPage-2==0)
		{
		
			this.leftStart=0;
			this.rightStart=1;
		
			var NextHtmlDiv = document.getElementById("flipHtml"+2);
			NextHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		}
		else if(this.currentPage == extArray.length)
		{
			var PrevHtmlDiv = document.getElementById("flipHtml"+1);
			PrevHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		
		}
		else
		{	
			
			$(this).rightStart = 3;
			$(this).leftStart = 2;
			var PrevHtmlDiv = document.getElementById("flipHtml"+1);
			PrevHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
			var RightBgDiv   = document.getElementById("RightBg") ;
			RightBgDiv.style.width=myPageW+"px";
			//var NextHtmlDiv = document.getElementById("flipHtml"+4);
			//NextHtmlDiv.style.background="#785165 url('Pic/Pictest.png') ";
		}
		
		
		hideDiv = document.getElementById("flipPage"+$(this).rightStart);
		hideHtmlDiv	= document.getElementById("flipHtml"+$(this).rightStart);
		hideHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		revealDiv = document.getElementById("flipPage"+$(this).leftStart);
		revealHtmlDiv = document.getElementById("flipHtml"+$(this).leftStart);	
		revealHtmlDiv.style.background="#785165 url('"+this.PageTexture+"') ";
		//---  New Page Organize Style--//
		hideHtmlDiv.style.left="";	
		hideHtmlDiv.style.right=0+'px';
		revealHtmlDiv.style.left="";	
		revealHtmlDiv.style.right=0 + 'px';
		////////////////////////////////////////////
			
		revealDiv.style.left="0px";	
		revealDiv.style.width="0px";
		revealDiv.style.zIndex=99;

		hideDiv.style.left="";
		hideDiv.style.right=pWidth+"px";
	
		$(this).oElem   = document.getElementById("flipPage"+$(this).rightStart);

		e = e ? e : window.event;
		$(this).oElem.mouseX = e.clientX;
		$(this).oElem.mouseY = e.clientY;

		document.onmousemove = function(e){Book.dragLeft(e);};
		document.onmouseup = function(e){Book.dragLeftEnd(e);};
		//document.onmouseup = function(e){dragEnd(e);};
		
		}
		
	}
	},

	dragLeft:function (e)
    {
		
		
		if(parseInt(revealDiv.style.left) >= pWidth -this.LeftBorder)
		{
		
			revealDiv.style.left=pWidth-this.LeftBorder+"px";
			revealDiv.style.width=pWidth+"px";
			hideDiv.style.width = "0px";
			revealDiv.style.zIndex=extArray.length-this.leftStart ;
	
			if( this.currentPage ==extArray.length)
			{
				this.leftStart=this.leftStart-2;
				this.rightStart=this.rightStart-2;
			
			}
			this.currentPage = this.currentPage -2;
			
			var RightBgDiv   = document.getElementById("RightBg") ;
			RightBgDiv.style.width=0+"px";
			PageshadowL.style.width="0px";      

			
			BorderDiv.style.width = "0px";
			
			document.onmousemove = null;
			document.onmouseup = null; 
			
			Book.SetPage(false);
			$(this).isDrag = false;
			
			
			return;
		
	    }
		else
		{
			e = e ? e : window.event;
			if((e.clientX - $(this).oElem.mouseX)>0)
			{
				
			   
				revealDiv.style.left = (1/2)*(e.clientX - $(this).oElem.mouseX)+this.LeftBorder   + 'px'; 
			
				revealDiv.style.width =  (1/2)*(e.clientX - $(this).oElem.mouseX) - this.LeftBorder  + 'px'; 
				
				if((pWidth - (e.clientX - $(this).oElem.mouseX)-this.LeftBorder)>0)
				{
				hideDiv.style.width =	pWidth - (e.clientX - $(this).oElem.mouseX)-this.LeftBorder  +'px';
				}
				PageshadowL.style.zIndex=parseInt(hideDiv.style.zIndex)+1; 
				PageshadowL.style.left = "0px";
				PageshadowL.style.width= pWidth -parseInt(hideDiv.style.width )+"px";
				
				PageshadowL.style.opacity =(pWidth - parseInt(PageshadowL.style.width)-this.LeftBorder)/1000  ;
				
				BorderDiv.style.left = parseInt(revealDiv.style.left)-3+"px";
				BorderDiv.style.opacity = 0.4;
				BorderDiv.style.width = "5px";
				//PageshadowL.style.opacity =0.5 ;
				//PageshadowL.style.FILTER = " alpha(opacity=50)";
			}

			return false;
		}
		
	},
	dragRight:function(e)
	{

		if(parseInt(revealDiv.style.left) <= this.LeftBorder )
		{

			revealDiv.style.left=this.LeftBorder+'px';
			revealDiv.style.width=pWidth+'px';
			hideDiv.style.width = 0+'px';
			revealDiv.style.zIndex= this.rightStart ;
			
			var LeftBgDiv   = document.getElementById("LeftBg") ;
			LeftBgDiv.style.width=0+"px";
			BorderDiv.style.width = "0px";
			this.currentPage = this.currentPage +2;
			
			Book.SetPage(true);
			
			this.isDrag = false;
			document.onmousemove = null;
			document.onmouseup = null;
				
			
			return false ;
	    }	
		else
		{
			e = e ? e : window.event;

			if(e.clientX - $(this).oElem.mouseX<0)
			{

					
					revealDiv.style.left =(  pWidth*2 + (e.clientX - $(this).oElem.mouseX) ) + 'px'; 
					revealDiv.style.width =  Math.abs(e.clientX - $(this).oElem.mouseX)*(1/2) + 'px';
					
					if((pWidth - Math.abs(e.clientX - $(this).oElem.mouseX))>0)//((revealLeft  - pWidth - this.LeftBorder)>0)
					{
					hideDiv.style.width =	pWidth - Math.abs(e.clientX - $(this).oElem.mouseX)+'px';
				
					}
					else
					{
					hideDiv.style.width =	0+'px';
					
					}
					if(parseInt(revealDiv.style.left)+parseInt(revealDiv.style.width)+3 >pWidth)
					{
					BorderDiv.style.left = parseInt(revealDiv.style.left)+parseInt(revealDiv.style.width)+3+"px";
					BorderDiv.style.opacity = 0.4;
					BorderDiv.style.width = "5px";
					
					PageshadowL.style.zIndex=parseInt(hideDiv.style.zIndex)+1; 
					PageshadowL.style.left = parseInt(BorderDiv.style.left)+"px";
					PageshadowL.style.width= pWidth -parseInt(hideDiv.style.width )-parseInt(revealDiv.style.width )+"px";
					PageshadowL.style.opacity =(pWidth - parseInt(PageshadowL.style.width)-this.LeftBorder)/1000  ;
					}
					else
					{
					
					BorderDiv.style.width = "0px";
					}
			}

		return false;
		}
		
	},
	dragLeftEnd:function (e)
    {
			document.onmousemove = null;
			document.onmouseup = null;
			$(this).isMoving = true;
			var Check = parseInt(revealDiv.style.left);
			if(Math.abs(Check)>Math.abs(($(this).pWidth)*(1/4)))
			{
			Book.goleft(parseInt(revealDiv.style.left), parseInt(revealDiv.style.width));
			}
			else
			{
			Book.goleftReverse(parseInt(revealDiv.style.left), parseInt(revealDiv.style.width));
			}			
			return false;
	},
	dragRightEnd:function (e)
    {
		document.onmousemove = null;
		document.onmouseup = null;
		$(this).isMoving = true;
		var Check = parseInt(revealDiv.style.left);
		
		if(Math.abs(Check)>Math.abs(($(this).pWidth)*(3/2)))
		{
		Book.gorightReverse(parseInt(revealDiv.style.left), parseInt(revealDiv.style.width));
		}
		else
		{
		Book.goright(parseInt(revealDiv.style.left), parseInt(revealDiv.style.width));
		}
		//PageshadowR.style.width= "0px";
		
		return false;
	},
	dragEnd:function (e)
	{
		document.onmousemove = null;
		document.onmouseup = null;			
		return false;
	},
	
	DisableMouseEvent:function (e)
    {	
		for(var i = 0; i< extArray.length;i++)
		{
			SampleDiv  = document.getElementById("flipHtml"+i);
			if(i%2 == 0)
			{
				SampleDiv.onmousedown = null;	
			}
			else
			{	
				SampleDiv.onmousedown = null;
			}
		}
	},

	EnableMouseEvent:function (e)
    {	
		for(var i = 0; i< extArray.length;i++)
		{
			SampleDiv   = document.getElementById("flipHtml"+i);
			if(i%2 == 0)
				{
					SampleDiv.onmousedown = function(e){Book.dragBegin(e,true);};
				}
				else
				{
					SampleDiv.onmousedown = function(e){Book.dragBegin(e,false);};
				}
		}
	},
	getLastPage:function ()
    {
		return  this.extArray.length-1;
	},
	SetPage:function(IsDragRight)
	{	
		if(IsDragRight)
		{	
			if(this.currentPage ==0)
			{
				var LeftHtmlDiv = document.getElementById("flipHtml"+0);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[0]+"')";
			}
			else if(this.currentPage ==2)
			{	
				var LeftHtmlDiv = document.getElementById("flipHtml"+1);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage-1]+"')";
			
				var RightHtmlDiv	= document.getElementById("flipHtml"+2);
				RightHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage]+"') ";
			}
			else if(this.currentPage == extArray.length)
			{
				var LeftHtmlDiv = document.getElementById("flipHtml"+3);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage-1]+"')";
				
				
			}
			else
			{	
				var LeftHtmlDiv = document.getElementById("flipHtml"+1);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage-1]+"')";
			
				var RightHtmlDiv	= document.getElementById("flipHtml"+2);
				RightHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage]+"') ";
			
			}
		}
		else
		{	
			if(this.currentPage == extArray.length - 2)
			{
			
				var LeftHtmlDiv = document.getElementById("flipHtml"+1);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage-1]+"')";
			
				var RightHtmlDiv	= document.getElementById("flipHtml"+2);
				RightHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage]+"') ";
			
			}
			else if(this.currentPage ==0)
			{
			
				var LeftHtmlDiv = document.getElementById("flipHtml"+0);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[0]+"')";
			}
			else if(this.currentPage == this.extArray.length)
			{
				var LeftHtmlDiv = document.getElementById("flipHtml"+3);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage-1]+"')";
			
			}
			else
			{	
				
				var LeftHtmlDiv = document.getElementById("flipHtml"+1);	
				LeftHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage-1]+"')";
			
				var RightHtmlDiv	= document.getElementById("flipHtml"+2);
				RightHtmlDiv.style.background="#785165 url('"+this.extArray[this.currentPage]+"') ";
			
			}
		}
	}
});